<template>
  <div class="finance-page">
    <div class="finance-menu">
      <el-menu
        :default-active="activeIndex"
        class="finance-menu-box"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item
          v-for="item in navItems"
          :key="item.title"
          :index="'/finance' + item.path"
        >
          {{ item.title }}
        </el-menu-item>
      </el-menu>
    </div>

    <section class="finance-main container">
      <transition name="fade-transform" mode="out-in">
        <router-view :key="activeIndex"/>
      </transition>
    </section>
  </div>
</template>

<script>
  import {mapGetters} from "vuex"

  export default {
    components: {},
    props: {},
    data() {
      return {
        navItems: [
          {title: "财务信息汇总", path: "/global"},
          {title: "财务信息", path: "/info"},
          {title: "优惠券管理", path: "/coupon"},
          {title: "优惠记录", path: "/discount"},
          {title: "发票管理", path: "/invoice"},
          {title: "在线充值", path: "/recharge"},
          {title: "退款记录", path: "/refund"},
        ]
      };
    },
    watch: {},
    computed: {
      activeIndex() {
        let navItem = this.navItems.find(item => {
          return this.$route.path.indexOf(item.path) != -1;
        });
        return "/finance" + navItem.path;
      },
      ...mapGetters(["userInfo"])
    },
    methods: {
      handleSelect(key, keyPath) {
        this.$router.push({path: key});
      }
    },
    created() {
      if (this.userInfo.role == 1||this.userInfo.role == 4) {    //管理员 财务
        this.navItems = [
          {title: "财务信息汇总", path: "/global"},
          {title: "财务信息", path: "/info"},
          {title: "优惠券管理", path: "/coupon"},
          {title: "优惠记录", path: "/discount"},
          {title: "发票管理", path: "/invoice"},
          {title: "退款记录", path: "/refund"},
          // {title: "违禁词管理", path: "/word"},
        ]
      } else {      //企业用户
        this.navItems = [
          {title: "财务信息", path: "/info"},
          {title: "优惠记录", path: "/discount"},
          {title: "发票管理", path: "/invoice"},
          {title: "在线充值", path: "/recharge"},
          {title: "退款记录", path: "/refund"},
        ]
      }
    },
    mounted() {
    }
  };
</script>
<style lang="scss" scoped>
  .finance-page {
    .finance-menu {
      text-align: center;
    }

  }

  .finance-menu-box {
    margin-top: 4px;
    display: inline-block;
    overflow: auto;
    border-bottom-color: #ffffff !important;
  }
</style>
